import React from "react";
import {Button as AntdButton, Tooltip as AntdTooltip} from 'antd';
import {renderIcon, VJsonComponent, VJsonComponentBase} from "../../factory";
import {NamePath} from "rc-field-form/lib/interface";
import _ from 'lodash'
import {YvanEvent} from "../../types";
import {apply, isPromise, YvanEventBind, YvanEventDispatch} from "../../utils/helper";
import {SizeType} from "antd/lib/config-provider/SizeContext";
import {ButtonShape, ButtonType} from "antd/lib/button/button";
import * as Extend from '../../extend'
import {toJS} from "mobx";

export interface ButtonVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean
    type?: ButtonType;
    icon?: React.ReactNode | string;
    shape?: ButtonShape;
    size?: SizeType;
    loading?: boolean | { delay?: number; };
    prefixCls?: string;
    className?: string;
    tooltip?: string;
    ghost?: boolean;
    href?: string;
    danger?: boolean;
    block?: boolean;
    disabled?: boolean
    text?: string
    target?: string;
    onClick?: (sender: Button) => (Promise<any> | void)
    htmlType?: "submit" | "button" | "reset"
}

export interface ButtonState {
    formItemName: NamePath
}

@VJsonComponent({
    view: 'button'
})
export default class Button extends VJsonComponentBase<ButtonVJsonProp, ButtonState> {
    static defaultProps = {
        loading: false,
        visible: true,
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            this.props.vjson,
            Button.defaultProps
        )
    }

    set visible(value: boolean) {
        this.props.vjson.visible = value
    }

    get visible() {
        return this.props.vjson.visible!
    }

    set disabled(value: boolean) {
        this.props.vjson.disabled = value
    }

    get disabled() {
        return this.props.vjson.disabled!
    }

    get loading() {
        return this.props.vjson.loading
    }

    set loading(v) {
        this.props.vjson.loading = v
    }

    set text(text: string) {
        this.props.vjson.text = text
    }

    onClickBind() {
        const res = YvanEventDispatch(this.props.vjson.onClick, this)
        if (isPromise(res)) {
            this.loading = true
            res.finally(() => {
                this.loading = false
            })
        }
    }

    render() {
        if (Extend.isDebugMode()) {
            console.log('RenderButton', this.toString())
        }

        if (!this.props.vjson.visible) {
            return null
        }

        const button = // @ts-ignore
            <AntdButton key={this.key} view_id={this.key} aria-roledescription={this.view}
                        block={apply(this, this.props.vjson.block)}
                        style={apply(this, toJS(this.props.vjson.style))}
                        danger={apply(this, this.props.vjson.danger)}
                        disabled={apply(this, this.props.vjson.disabled)}
                        ghost={apply(this, this.props.vjson.ghost)}
                        href={apply(this, this.props.vjson.href)}
                        tooltip={apply(this, this.props.vjson.tooltip)}
                        htmlType={apply(this, this.props.vjson.htmlType)}
                        icon={renderIcon(this.props.vjson.icon)}
                        loading={apply(this, this.props.vjson.loading)}
                        onClick={this.onClickBind.bind(this)}
                        shape={apply(this, this.props.vjson.shape)}
                        size={apply(this, this.props.vjson.size)}
                        target={apply(this, this.props.vjson.target)}
                        type={apply(this, this.props.vjson.type)}
                        className={apply(this, this.props.vjson.className)}
            >
                {apply(this, this.props.vjson.text)}
            </AntdButton>

        const tooltip = apply(this, this.props.vjson.tooltip)
        if (tooltip) {
            return (<AntdTooltip title={tooltip}>
                {button}
            </AntdTooltip>)
        }

        return button
    }
}
